<template>
  <div class="recommend">
    <div class="more">
        <span class="title">新客首单直降</span><a><span class="link">更多福利  ></span></a>
    </div>
    <div class="container" id="container" ref="container">
        <div class="item-list" v-for="item in recommend" :key="item">
            <card :name="item.name" :price="item.price"/>
        </div>
    </div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue';
import card from '../../../utils/components/card'

export default {
    name:'Recommend',
    components:{ card },
    setup(){
        let recommend = [
            {id:'001',name:'新鲜鸡蛋',price:'0.99',picUrl:''},
            {id:'002',name:'新鲜牛奶',price:'1.99',picUrl:''},
            {id:'003',name:'东方树叶',price:'2.3',picUrl:''},
            {id:'004',name:'茉莉花茶',price:'2.3',picUrl:''},
            {id:'005',name:'海南椰奶',price:'3.4',picUrl:''},
            {id:'006',name:'普洱茶',price:'4.3',picUrl:''},
            {id:'007',name:'康师傅泡面',price:'1.8',picUrl:''},
            {id:'008',name:'茶Π',price:'2.5',picUrl:''},
            {id:'009',name:'乐事',price:'1.6',picUrl:''},
            {id:'010',name:'百事可乐',price:'1.65',picUrl:''},
            {id:'011',name:'哇哈哈八宝粥',price:'3.55',picUrl:''},
            {id:'012',name:'脉动',price:'3.95',picUrl:''}
        ]
        let timer
        let currentPoint = undefined
        let container = ref(null)

        function scrollStart(container){
            if(timer){
                clearInterval(timer)
            }
            timer = setInterval(()=>{
                currentPoint = container.value.scrollLeft
                container.value.scrollLeft++
                let temp = container.value.scrollLeft
                if(currentPoint === temp){
                    container.value.scrollLeft = 0
                }
            },10)
        }
        onMounted(()=>{
            scrollStart(container)
        })
        onUnmounted(()=>{
            clearInterval(timer)
        })

        return {
            recommend,container,timer,currentPoint,scrollStart
        }
    }
}
</script>

<style scoped>
    .recommend {
        width: 73vw;
        margin-top: 20px;
        margin-right: auto;
        margin-left: auto;
        background-color: #e49898;
        padding: 3px;
        border-radius: 10px;
        height: 200px;
        box-sizing: border-box;
        min-width: 600px;
    }
    .container {
        width: 100%;
        height: auto;
        margin-top: 10px;
        display: flex;
        overflow: hidden;
    }
    .item-list {
        flex: 0 0 auto;
        border-radius: 5px;
        margin: 0 10px;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .description {
        margin-top: 10px;
    }
    .name {
        font-size: 16px;

    }
    .price {
        font-size: 12px;
        color: red;
    }
    .title {
        font-size: 25px;
        color: #c90c0c;
    }
    .link {
        float: right;
        font-size: 15px;
        color: grey;
        margin-right: 20px;
        margin-top: 10px;
    }
</style>